<template>
  <div>
    <div>任务通知</div>
    <div>
      <el-table :data="tableData"  :height="height"  style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.taskId }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{{ props.row.taskName }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{{ props.row.groupId }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品 ID" prop="taskId"> </el-table-column>
        <el-table-column label="商品名称" prop="taskName"> </el-table-column>
        <el-table-column label="描述" prop="groupId"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      height: "",
      tableData: [
        {
          taskId: "12987122",
          taskName: "好滋好味鸡蛋仔",
          groupId: "江浙小吃、小吃零食",
        },
      ],
    };
  },
  mounted() {
    let that = this;
    // 初始化
    window.fullHeight = document.documentElement.clientHeight;
    window.fullWidth = document.documentElement.clientWidth;
    that.windowHeight = window.fullHeight; // 高
    that.windowWidth = window.fullWidth; // 宽
    this.height = that.windowHeight/100*40;

  },
  created() {
    this.$axios({
      method: "GET",
      url: "http://81.70.192.34:8088/task/getTaskInfoListByGroup",
    }).then(res => {
      this.tableData = res.data.data.records
    }).catch((error) => {
      console.error(error);
    });
  }
};
</script>


<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 500px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>